<script>

import { ClassList, SchoolList, addClass, delClass, updateClass } from '@/api/system/api'
import item from '@/layout/components/Sidebar/Item.vue'

export default {
  name: 'index',
  data() {
    return {
      className: '',
      dpId: '',
      apple: '',
      useId: '',
      ids: '',
      dialogVisible_setUp: false,
      options_leader: [],
      value_leader: '',
      dialogVisible: false,
      options: [],
      schoolList: '',
      query: {
        pageSize: 10,
        pageNum: 1
      },
      deptId: [],
      id: '',
      name: '',
      tableData: [],
      nameS: '',
      delid: ''
    }
  },
  methods: {
    requests() {
      ClassList({ pageSize: 20, pageNum: 1, deptId: '', name: '' }).then(res => {

        this.options_leader = res.rows
      })
    },
    // 搜素
    search() {
      ClassList({ pageSize: 10, pageNum: 1, deptId: this.dpId, name: this.className }).then(res => {

        this.tableData = []
        res.rows.forEach(item => {
          this.tableData.push({
            college: item.college,
            name: item.name,
            userName: item.userName,
            createTime: item.createTime
          })
        })

      })
    },
    handleClose_setUp(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    // 删除班级
    deleteClass() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        delClass([this.delid])
        this.TeamList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑
    updated(row) {
      this.dialogVisible_setUp = true

      this.ids = row.id
      // this.useId = row.userId
      this.dpId = row.deptId
    },
    sure() {
      this.dialogVisible_setUp = false
      updateClass({ id: this.ids, userId: this.value_leader, name: this.apple, deptId: this.dpId }).then(res => {
          this.TeamList()
        }
      )
    },
    addAll() {
      let obj = {
        name: this.nameS,
        deptId: this.schoolList,
        userId: this.value_leader
      }
      this.TeamList()
      this.dialogVisible = false
      addClass(obj).then(res => {

      })

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    handleClick(row) {

      this.delid = row.id

    },
    // 获取表格里的数据
    TeamList() {
      ClassList({ pageSize: 50, pageNum: 1, deptId: '', name: '' }).then(res => {

        this.tableData = res.rows
      })
    },

    // 获取列表
    collegeList() {
      SchoolList(this.query).then(res => {

        this.options = res.data
      })
    }
  },
  created() {

    this.collegeList()
    this.requests()
    // ClassList({ pageSize: 20, pageNum: 1, deptId: '', name: '' }).then(res => {

    //   this.options_leader = res.rows
    // })
    this.TeamList()
  }
}
</script>

<template>
  <div>
    <div class="schoolClassList">
      <div class="schoolList">
        <span style="margin-right: 30px">学校名称</span>
        <!--        学院列表-->
        <div>
          <template>
            <el-select v-model="schoolList" placeholder="请选择">
              <el-option
                v-for="item in options"
                :label="item.deptName"
                :value="item.deptId"
              >
              </el-option>
            </el-select>
          </template>
        </div>
      </div>
      <div class="classList" style="margin: 30px auto">
        <span>班级名称</span>
        <input type="text" v-model="className">
      </div>
      <div class="searchReset">
        <button class="btnOne">重置</button>
        <button class="btnTwo" @click="search">搜索</button>
      </div>
    </div>
    <!--    添加导入-->
    <div class="addSchool">
      <el-button type="text" @click="dialogVisible = true">
        <button class="btn_class">添加</button>
      </el-button>
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div class="center">添加</div>
        <div class="schoolList">
          <span style="margin-right: 30px">学校名称</span>
          <!--        学院列表-->
          <div>
            <template>
              <el-select v-model="schoolList" placeholder="请选择">
                <el-option
                  v-for="item in options" :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId"
                >
                </el-option>
              </el-select>
            </template>
          </div>
        </div>
        <div class="classList">
          <span>班级名称</span>
          <input type="text" v-model="nameS" class="int-class">
        </div>
        <div class="leaderList">
          <span class="teacher">负责老师</span>
          <template>
            <el-select v-model="value_leader" placeholder="请选择">
              <el-option
                v-for="(item,index) in options_leader"
                :key="index"
                :label="item.userName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </template>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addAll">确 定</el-button>
  </span>
      </el-dialog>
    </div>
    <!--    表格-->
    <div class="titleList">
      <template>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >

          <el-table-column
            prop="college"
            label="学院名称"
            width="103"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="班级名称"
            width="579"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            label="负责老师"
            width="249"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="233"
          >
            <template slot-scope="scope">
              <template>
                <el-button type="text" @click="deleteClass">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                </el-button>
              </template>
              <el-button type="text" @click="updated(scope.row)">
                <el-button type="text" size="small">编辑</el-button>
              </el-button>
              <el-dialog

                :visible.sync="dialogVisible_setUp"
                width="30%"
                append-to-body
                :before-close="handleClose_setUp"
              >
                <div>
                  <div><span>班级名称:</span> <input type="text" v-model="apple"></div>
                  <div>
                    <div class="leaderList">
                      <span style="margin-left: 10px">负责老师</span>
                      <template>
                        <el-select v-model="value_leader" placeholder="请选择">
                          <el-option
                            v-for="(item,index) in options_leader"
                            :key="index"
                            :label="item.userName"
                            :value="item.userId"
                          >
                          </el-option>
                        </el-select>
                      </template>
                    </div>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible_setUp = false">取 消</el-button>
    <el-button type="primary" @click="sure">确 定</el-button>
  </span>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
.int-class {
  outline: none;
  width: 217px;
  height: 36px;
}

.leaderList {
  margin-left: -162px;
}

.teacher {
  //display: block;
  margin-right: 49px;
}

.schoolClassList {
  position: relative;
  margin-top: 30px;
  margin-bottom: 40px;
  margin-left: 30px;
}

.schoolClassList, .schoolList, .classList, .searchReset {
  display: flex;
}

.classList {
  margin: 50px 36px;
}

.schoolList {
  margin-left: 30px;
  margin-right: 20px;
}

.searchReset {
  right: 0;
  position: absolute;
}

input {
  margin-left: 20px;
  outline: none;
}

.btnTwo {
  margin-left: 30px;
  border: none;
  width: 80px;
  height: 30px;
  border-radius: 4px;
  background-color: rgba(24, 146, 255, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: center;
}

.btnOne {
  border: 1px solid gray;
  width: 80px;
  height: 30px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
}

.titleList {
  margin: 50px 30px;
}

.btn_class {
  margin-left: 50px;
  border: none;
  width: 80px;
  height: 30px;
  border-radius: 4px;
  background-color: rgba(24, 146, 255, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: center;
}

::v-deep .el-dialog__body {
  height: 300px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}
</style>
